<template>
  <view class="vessel">
		<Home v-if="PageCur=='home'" ref="home"></Home>
		<Mall v-if="PageCur=='mall'" ref="mall"></Mall>
		<Mine v-if="PageCur=='mine'" ref="mine"></Mine>
		<view class="tabbarClass">
			<view class="action" @click="NavChange" data-cur="home">
				<view class='cuIcon-cu-image'>
					<image :src="'/static/tabbar/home' + [PageCur=='home'?'_cur':''] + '.png'" mode="widthFix"></image>
				</view>
				<view  :class="PageCur=='home'?'tabbar-select-color':'text-color'">首页</view>
			</view>
			<view class="action" @click="NavChange" data-cur="mall">
				<view class='cuIcon-cu-image'>
					<image :src="'/static/tabbar/mall' + [PageCur == 'mall'?'_cur':''] + '.png'" mode="widthFix"></image>
				</view>
				<view :class="PageCur=='mall'?'tabbar-select-color':'text-color'">商城</view>
			</view>
			<view class="action" @click="NavChange" data-cur="mine">
				<view class='cuIcon-cu-image'>
					<image :src="'/static/tabbar/mine' + [PageCur == 'mine'?'_cur':''] + '.png'" mode="widthFix"></image>
				</view>
				<view :class="PageCur=='mine'?'tabbar-select-color':'text-color'">我的</view>
			</view>
		</view>	
		<view class="placeView"></view>
  </view>
</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue'
	import { onPageScroll,onReachBottom } from '@dcloudio/uni-app'
	import Home from '@/pages/tabbar/home/index.vue'
	import Mall from '@/pages/tabbar/mall/index.vue'
	import Mine from '@/pages/tabbar/mine/index.vue'
	const PageCur = ref('home')
	const tabbarList = reactive(
		[
			{ 
				name:'home',
				scrollTop:0
			},{ 
				name:'mall',
				scrollTop:0
			},{ 
				name:'mine',
				scrollTop:0
			}
		]
	)
	const NavChange = ((e:any)=>{
		PageCur.value =	e.currentTarget.dataset.cur
		/*
			由于uniapp没有二级路由的概念，所以用组件的方式来实现tabbar的切换，但有一定的缺陷，每个组件共享index父组件的滚动条高度
			所以用此方法记录每个组件单独划过的滚动高度，再切换回来时，直接重定向到之前滑到的锚点上去
		*/ 
		const findCurw =  tabbarList.find((item)=>{
			return item.name == PageCur.value
		})
		if(findCurw){
			uni.pageScrollTo({
			    scrollTop: findCurw.scrollTop,
			    duration: 0
			});
		}
	})
	onPageScroll(e => {
		const findCur =  tabbarList.find((item)=>{
			return item.name == PageCur.value
		})
		if(findCur){
			findCur.scrollTop = e.scrollTop
		}
	})
	onReachBottom(()=> {
		console.log('触底之间')
		uni.$emit('onReach',PageCur)
	})
</script>

<style lang="scss" scoped>
.tabbarClass{
	display: flex;
	justify-content: space-around;
	position: fixed;
	z-index: 111;
	bottom: 0;
	width: 100%;
	padding-top: 4px;
	padding-bottom: calc(env(safe-area-inset-bottom) - 15px) ;
	box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.05);
	background: #fff;
	.action{
		text-align: center;
		padding-bottom: 10rpx;
	}
	.cuIcon-cu-image image{
		width: 50rpx;
	}
}
.tabbar-select-color{
	color: #000;
}
.text-color{
	color: gray;
}
.placeView{
	height: 82px;
	padding-bottom:env(safe-area-inset-bottom) ;
}
</style>
